<template>
  <div>
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form
        :model="form"
        ref="vehicleInformationZD"
        label-width="120px"
        :rules="($route.query.btnType == 1 && type !== 'detail') || (form.btnType == 1 && type !== 'detail') ? rules : {}"
        :label-position="($route.query.btnType == 1 && type !== 'detail') || (form.btnType == 1 && type !== 'detail') ? 'top' : 'right'"
      >
        <div class="card-title-wrap">
          <span :style="{ fontWeight: type == 'detail' ? 'normal' : 'bold' }">替车账单信息</span>
          <span></span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="付款方式:" prop="paymentMethods">
              <el-select style="width: 80%" v-if="($route.query.btnType == 1 && type !== 'detail') || (form.btnType == 1 && type !== 'detail')" v-model="form.paymentMethods" clearable>
                <template v-for="dict in dict.type.payment_method">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>
              <dict-tag v-else :options="dict.type.payment_method" :value="form.paymentMethods" />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.paymentMethods == 1">
            <el-form-item label="含税租金(合计):" prop="containTaxRent">
              <el-input maxlength="13" @change="changeAmount('containTaxRent')" clearable v-if="type !== 'detail'" style="width: 80%" v-model="form.containTaxRent"></el-input>
              <span v-if="type == 'detail'">{{ form.containTaxRent | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.paymentMethods == 1">
            <el-form-item label="司机费用:" prop="driverFee">
              <el-input @change="changeAmount('driverFee')" maxlength="13" clearable v-if="type !== 'detail'" style="width: 80%" v-model="form.driverFee"></el-input>
              <span v-if="type == 'detail'">{{ form.driverFee | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.paymentMethods == 1">
            <el-form-item label="租车费(总计):" prop="totalCarRentalFee">
              <span style="margin-left: 20px">{{ format_thousand(totalPrice) | filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.paymentMethods == 1">
            <el-form-item label="租期:" prop="lease">
              <span style="margin-left: 20px">{{ form.lease | filterNull }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="18" v-if="form.paymentMethods == 1">
            <el-form-item label="备注:">
              <el-input v-if="type !== 'detail'" type="textarea" v-model="form.billRemark" maxlength="500" :rows="5" show-word-limit></el-input>
              <span v-if="type == 'detail'">{{ form.billRemark | filterNull }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'vehicleInformationZD',
  dicts: ['payment_method'],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
    totalPrice() {
      return this.numberAdd(this.form.containTaxRent, this.form.driverFee)
    },
  },
  data() {
    return {
      rules: {
        paymentMethods: [
          {
            required: true,
            message: '请选择付款方式',
            trigger: 'change',
          },
        ],
        containTaxRent: [
          {
            required: true,
            message: '请输入含税租金',
            trigger: 'blur',
          },
        ],
        driverFee: [
          {
            required: true,
            message: '请输入司机费用',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (!msg.test(this.form[str])) {
        this.form[str] = ''
      } else {
        this.form[str] = this.form[str].toString().match(/^\d+(?:\.\d{0,2})?/)[0]
      }
    },
    // 创建时间发生改变
    changeTime(val) {
      this.form.startTime = val && val[0]
      this.form.endTime = val && val[1]
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.box-wraps:after {
  content: '';
  display: block;
  clear: both;
  width: 32%;
}
</style>
